<template>
	<view class="page">
		<image class="iwidth" :src="imgPath+'/static/big/square/sbg.png'" mode="widthFix"></image>
		<view class="back_btn" @click="leftClick"></view>
		<image class="tabTitle" v-if="!startshow || end" :src="imgPath+'/static/big/square/swc.png'" mode="widthFix"></image>
		<image class="tabImage" v-if="start && startshow" :src="imgPath+'/static/big/square/sstart0.png'" mode="widthFix"></image>
		<image class="tabImage1" v-if="start && startshow" :src="imgPath+'/static/big/square/sstart1.png'" mode="widthFix" @click="startshow = false"></image>
		<image class="tabImage" v-if="start && !startshow" :src="imgPath+'/static/big/square/send0.png'" mode="widthFix" @click="startshow = true"></image>
		<image class="tabImage1" v-if="start && !startshow" :src="imgPath+'/static/big/square/send1.png'" mode="widthFix" ></image>
		<image class="tabImage" v-if="end && endshow" :src="imgPath+'/static/big/square/sall0.png'" mode="widthFix" ></image>
		<image class="tabImage" v-if="end && !endshow" :src="imgPath+'/static/big/square/sall1.png'" mode="widthFix" @click="endshow = true"></image>
		<image class="tabImage1" v-if="end && !endshow" :src="imgPath+'/static/big/square/sstart0.png'" mode="widthFix" ></image>
		<image class="tabImage1" v-if="end && endshow" :src="imgPath+'/static/big/square/send0.png'" mode="widthFix" @click="endshow = false"></image>
		<view class="square">
			<scroll-view scroll-y="true" scroll-x="true" style="height: 100%;" @scrolltolower="goBottom" :lower-threshold="60">
				<view class="scroll-view_H">
					<view class="scroll-box">
						<view class="scroll-view-item_H no-data" v-if="list.length == 0" style="text-align: center;">
							<view v-if="start && startshow || end && !endshow">当前没有正在组队中的小队</view>
							<view v-if="end && endshow || start && !startshow">当前还没有组队完成的小队</view>
						</view>
						<template v-for="(v,i) in list">
							<view>
								<view v-if="start && startshow || end && !endshow">
									<view v-for="(l, li) in v.slice(0,3)" :key="l.id" class="scroll-view-item_H " @tap.stop="goZd(l, li)">
										<view class="item-name">{{l.teamName}}</view>
										<view class="item-border"></view>
										<view class="item-msg">{{l.squareSlogan}}</view>
										<view class="item-dy">
											<text class="dy-title">我的合拍队友是：</text>
											<view style="position: relative;">
												<image class="dyImage" :src="imgPath+'/static/big/square/sdy1.jpg'" mode="widthFix"></image>
												<text class="dyImage-txt">{{l.mbtis.split(',')[0]}}</text>
											</view>
											<view style="position: relative;">
												<image class="dyImage" :src="imgPath+'/static/big/square/sdy2.jpg'" mode="widthFix"></image>
												<text class="dyImage-txt">{{l.mbtis.split(',')[1]}}</text>
											</view>
											<view style="position: relative;">
												<image class="dyImage" :src="imgPath+'/static/big/square/sdy3.jpg'" mode="widthFix"></image>
												<text class="dyImage-txt">{{l.mbtis.split(',')[2]}}</text>
											</view>
										</view>
										<view class="item-dw">
											<view class="dw-item" v-if="l.members && l.members.length > 0">
												<text class="dw-bq">队长</text>
												<image class="dwImage" :src="l.members[0].avatar" mode="widthFix"></image>
												<text class="dw-name">{{l.members[0].nickname}}</text>
											</view>
											<view class="dw-item" v-if="l.members && l.members.length > 1">
												<image class="dwImage" :src="l.members[1].avatar" mode="widthFix"></image>
												<text class="dw-name">{{l.members[1].nickname}}</text>
											</view>
											<view class="dw-item" v-if="l.members && l.members.length > 2">
												<image class="dwImage" :src="l.members[2].avatar" mode="widthFix"></image>
												<text class="dw-name">{{l.members[2].nickname}}</text>
											</view>
											<image v-if="!modeShow && showfive && i == 0 && li == 0" class="dj-ts0 breath" :src="imgPath+'/static/big/square/sts.png'" mode="widthFix"></image>
										</view>
									</view>
								</view>
								<view v-if="end && endshow || start && !startshow" >
									<view v-for="(l, li) in v.slice(0,3)" :key="l.id" class="scroll-view-item_H item-end" @tap.stop="goKj(l,li)">
										<view class="" style="width: 90%">
											<view class="item-name2">{{l.teamName}}
												<text class="item-num">({{l.memberNumber}}人)</text>
											</view>
											<view class="item-border"></view>
											<!-- <video v-if="l.type=='video'" class="sendImage" id="myVideo" :src="l.file" :poster="l.file+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_305,h_168'" @error="videoErrorCallback" controls></video> -->
											<image v-if="l.type=='video'" class="sendImage" :src="l.file+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_305,h_168'" mode="aspectFill"></image>
											<image v-else class="sendImage" :src="l.file" mode="aspectFill"></image>
											<view class="item-dw">
												<view class="dw-item" v-if="l.members && l.members.length > 0">
													<text class="dw-bq">队长</text>
													<image class="dwImage" :src="l.members[0].avatar" mode="widthFix"></image>
													<text class="dw-name">{{l.members[0].nickname}}</text>
												</view>
												<view class="dw-item" v-if="l.members && l.members.length > 1">
													<image class="dwImage" :src="l.members[1].avatar" mode="widthFix"></image>
													<text class="dw-name">{{l.members[1].nickname}}</text>
												</view>
												<view class="dw-item" v-if="l.members && l.members.length > 2">
													<image class="dwImage" :src="l.members[2].avatar" mode="widthFix"></image>
													<text class="dw-name">{{l.members[2].nickname}}</text>
												</view>
											</view>
										</view>
										<image v-if="!modeShow && showfive && i == 0 && li == 0" class="dj-ts breath" :src="imgPath+'/static/big/square/sts.png'" mode="widthFix"></image>
										<view class="end-box">
											<image v-if="start && !startshow && !l.isVote || end && endshow && !l.isVote" class="dj-dz" :src="imgPath+'/static/big/square/sdz.png'" mode="widthFix" @click.stop="makeDz(l, li)"></image>
											<image v-if="start && !startshow && l.isVote || end && endshow && l.isVote" class="dj-dz" :src="imgPath+'/static/big/square/sdz1.png'" mode="widthFix"></image>
											<view class="end-num" v-if="start && !startshow || end && endshow">{{l.voteNumber}}</view>
										</view>
									</view>
								</view>
							</view>
							<view>
								<view v-if="start && startshow || end && !endshow">
									<view v-for="(r, ri) in v.slice(3,6)" :key="r.id" class="scroll-view-item_H " @tap.stop="goZd(r, ri + 3)">
										<view class="item-name">{{r.teamName}}</view>
										<view class="item-border"></view>
										<view class="item-msg">{{r.squareSlogan}}</view>
										<view class="item-dy">
											<text class="dy-title">我的合拍队友是：</text>
											<view style="position: relative;">
												<image class="dyImage" :src="imgPath+'/static/big/square/sdy1.jpg'" mode="widthFix"></image>
												<text class="dyImage-txt">{{r.mbtis.split(',')[0]}}</text>
											</view>
											<view style="position: relative;">
												<image class="dyImage" :src="imgPath+'/static/big/square/sdy2.jpg'" mode="widthFix"></image>
												<text class="dyImage-txt">{{r.mbtis.split(',')[1]}}</text>
											</view>
											<view style="position: relative;">
												<image class="dyImage" :src="imgPath+'/static/big/square/sdy3.jpg'" mode="widthFix"></image>
												<text class="dyImage-txt">{{r.mbtis.split(',')[2]}}</text>
											</view>
										</view>
										<view class="item-dw">
											<view class="dw-item" v-if="r.members && r.members.length > 0">
												<text class="dw-bq">队长</text>
												<image class="dwImage" :src="r.members[0].avatar" mode="widthFix"></image>
												<text class="dw-name">{{r.members[0].nickname}}</text>
											</view>
											<view class="dw-item" v-if="r.members && r.members.length > 1">
												<image class="dwImage" :src="r.members[1].avatar" mode="widthFix"></image>
												<text class="dw-name">{{r.members[1].nickname}}</text>
											</view>
											<view class="dw-item" v-if="r.members && r.members.length > 2">
												<image class="dwImage" :src="r.members[2].avatar" mode="widthFix"></image>
												<text class="dw-name">{{r.members[2].nickname}}</text>
											</view>
										</view>
									</view>
								</view>
								<view v-if="end && endshow || start && !startshow">
									<view v-for="(r, ri) in v.slice(3,6)" :key="r.id" class="scroll-view-item_H item-end"  @tap.stop="goKj(r, ri + 3)">
										<view class="" style="width: 90%">
											<view class="item-name2">{{r.teamName}}
												<text class="item-num">({{r.memberNumber}}人)</text>
											</view>
											<view class="item-border"></view>
											<!-- <video v-if="r.type=='video'" class="sendImage" id="myVideo" :src="r.file" :poster="r.file+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_305,h_168'" @error="videoErrorCallback" controls></video> -->
											<image v-if="r.type=='video'" class="sendImage" :src="r.file+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_305,h_168'" mode="aspectFill"></image>
											<image v-else class="sendImage" :src="r.file" mode="aspectFill"></image>
											<view class="item-dw">
												<view class="dw-item" v-if="r.members && r.members.length > 0">
													<text class="dw-bq">队长</text>
													<image class="dwImage" :src="r.members[0].avatar" mode="widthFix"></image>
													<text class="dw-name">{{r.members[0].nickname}}</text>
												</view>
												<view class="dw-item" v-if="r.members && r.members.length > 1">
													<image class="dwImage" :src="r.members[1].avatar" mode="widthFix"></image>
													<text class="dw-name">{{r.members[1].nickname}}</text>
												</view>
												<view class="dw-item" v-if="r.members && r.members.length > 2">
													<image class="dwImage" :src="r.members[2].avatar" mode="widthFix"></image>
													<text class="dw-name">{{r.members[2].nickname}}</text>
												</view>
											</view>
										</view>
										<view class="end-box">
											<image v-if="start && !startshow && !r.isVote || end && endshow && !r.isVote" class="dj-dz" :src="imgPath+'/static/big/square/sdz.png'" mode="widthFix" @click.stop="makeDz(r, ri + 3)"></image>
											<image v-if="start && !startshow && r.isVote || end && endshow && r.isVote" class="dj-dz" :src="imgPath+'/static/big/square/sdz1.png'" mode="widthFix"></image>
											<view class="end-num" v-if="start && !startshow || end && endshow">{{r.voteNumber}}</view>
										</view>
									</view>
								</view>
							</view>
						</template>
					</view>
				</view>
			</scroll-view>
		</view>
		<image v-if="showFb && start && startshow || showFb && end && !endshow" class="fbImage" :src="imgPath+'/static/big/square/sfb.png'" mode="widthFix" @click="txShow = true,txt = '',left = false"></image>
		<image class="phImage" :src="imgPath+'/static/big/square/sph.png'" mode="widthFix" @click="goUrl"></image>
		<u-popup v-model="modeShow"  mode="center" :mask-close-able="false">
			<view class="mwrap">
				<image class="first-ts breath" mode="widthFix" :src="imgPath+'/static/big/square/sts0.png'" @click="modeShow=false"></image>
			</view>
		</u-popup>
		<u-popup v-model="txShow"  mode="center" :mask-close-able="false">
			<view style="position: relative;">
				<image class="txImage" mode="widthFix" :src="imgPath+'/static/big/square/stx.png'"></image>
				<textarea class="textarea" :class="left ? 'left' : ''" @input="textInput" v-model="txt" maxlength=30></textarea>
				<view class="placeholder" v-if="!left">输入招募口号（30个字以内)</view>
				<view class="cancel_btn" @click="txShow = false"></view>
				<view class="ok_btn" @click="makeOk"></view>
			</view>
		</u-popup>
		<NewRule/>
		<BgMusic ref="bgMusic"/>
	</view>
</template>

<script>
	import http from "@/src/http";
	export default {
		data() {
			return {
				userBool:false,
				current: 0,
				modeShow: true,
				tsShow: false,
				isFirst: '2',
				txShow: false,
				txt: '',
				start: true,
				end: false,
				startshow: true,
				endshow: true,
				dzshow: false,
				showfive: true,
				left: false,
				page: 1,
				status: 1,
				list: [],
				teamId: '',
				stage: 0,
				showFb: false,
				timeout: null
			}
		},
		watch: {
			endshow(n) {
				if (n) {
					this.status = 2
				} else {
					this.status = 1
				}
				this.page = 1
				this.list = []
				this.getList()
			},
			startshow(n) {
				if (n) {
					this.status = 1
				} else {
					this.status = 2
				}
				this.page = 1
				this.list = []
				this.getList()
			}
		},
		onLoad(options) {
			this.isFirst = uni.getStorageSync('isFirst') || '2'
			if (this.isFirst == '2') {
				setTimeout(() => {
					uni.setStorageSync('isFirst', '1');
					this.modeShow = false
					setTimeout(() => {
						this.showfive = false
					}, 5000)
				}, 5000)
			} else {
				this.modeShow = false
				setTimeout(() => {
					this.showfive = false
				}, 5000)
			}
		},
		onShow() {
			this.page = 1
			this.startshow = true
			this.status = 1
			this.list = []
			this.loadData()
		},
		methods: {
			loadData(){
				return http.initData().then(res=>{
					this.teamId = res.data.mbtiUser.teamId
					if (this.teamId>0 && res.data.mbtiUser.isCaptain) {
						const params = {
							action: 'view',
							teamId: this.teamId
						}
						http.teamManage(params).then(res2=>{
							if(res.data){
								if (res2.data.mbtiTeam.status == 1 && res2.data.mbtiTeam.squareShow == 0) {
									this.showFb = true
								} else {
									this.showFb = false
								}
							}
						})
					} else {
						this.showFb = false
					}
					// 活动阶段 0=未开始 1=组队期 2=任务期 3=任务期结束
					this.stage = res.data.config.stage

					if (this.stage >= 2) {
						this.end = true
						this.start = false
						this.status = 2
					} else {
						this.end = false
						this.start = true
						this.status = 1
					}
					this.getList()
				})
			},
			videoErrorCallback(e) {
			},
			makeOk() {
				if (!this.txt) { 
					return this.$u.toast('请输入招募口号');
				}else if(this.txt.length>30){
					return this.$u.toast('口号过长');
				}
				const params = {
					squareSlogan: this.txt
				}
				http.squareShow(params).then(res=>{
					if (res.status == 0) {
						this.page = 1
						this.list = []
						this.loadData();
						this.txShow = false;
						this.$u.toast('发布成功')
					} else {
						this.$u.toast(res.message)
					}
				})
			},
			debounceSearch(val, i) {
				// 清除之前的定时器
				clearTimeout(this.timeout);

				// 设置新的定时器，延迟执行搜索逻辑
				this.timeout = setTimeout(() => {
					// 实际的搜索逻辑，这里可以调用搜索接口等
					const params = {
						teamId: val[i].id
					}
					http.vote(params).then(res=>{
						if (res.status == 0) {
							// this.dzshow = true
							val[i].voteNumber = Number(val[i].voteNumber) + 1
							val[i].isVote = true
							this.$u.toast('点赞成功')
						} else {
							this.$u.toast(res.message)
						}
					})
				}, 500); // 设置防抖的时间间隔，例如500毫秒
			},
			makeDz(val, i) {
				this.debounceSearch(val, i)
			},
			goBottom(...e) {
				if (e[0].detail.direction == 'right') {
					this.page += 1
					this.getList()
				}
			},
			getList(type) {
				const params = {
				    "page": this.page,
				    "size": 6,
				    "status": this.status
				}
				http.squareData(params).then(res=>{
					const arr = res.data.data
					var newArr = [];
					for(var i = 0; i < arr.length; i += 6){
						newArr.push(arr.slice(i, i + 6));
					}
					this.list = this.list.concat(newArr)
					console.log(this.list)
				})
			},
			goUrl(){
				uni.redirectTo({
					url:'/pages/activeB/leaderboard/index'
				});
			},
			goZd(v, i) {
				uni.redirectTo({
					url:`/pages/activeB/teamCenter/index?teamId=${v[i].id}`
				});
			},
			goKj(v, i){
				uni.redirectTo({
					url:`/pages/activeB/squadspace/index?teamId=${v[i].id}`
				});
			},
			leftClick(){
				console.log(getCurrentPages())
				uni.navigateBack()
			},
			textInput() {
				if (this.txt) {
					this.left = true
				} else {
					this.left = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.tabImage {
	width: 181rpx;
	height: 113rpx;
	position: absolute;
	top: 279rpx;
	left: 17rpx
}
.tabImage1 {
	width: 181rpx;
	height: 113rpx;
	position: absolute;
	top: 279rpx;
	left: 198rpx
}
.tabTitle{
	position: absolute;
	width: 545rpx;
	height: 36rpx;
	top: 15.5%;
	left: 14%;
}
.phImage{
	position: fixed;
	width: 100%;
	height: 95rpx!important;
	bottom: 0;
}
.fbImage{
	position: fixed;
	width: 123rpx;
	height: 140rpx;
	bottom: 200rpx;
	right: 4rpx
}
.mwrap{
	width: 488rpx;
	left:17%;
	.first-ts{
		width: 458rpx;
		height: 155rpx;
	}
}
.txImage {
		width: 577rpx;
		height: 399rpx;
	}
.textarea {
		position: absolute;
		top: 162rpx;
		left: 45rpx;
		width: 451rpx;
		height: 144rpx;
		border: 1px solid #181818;
		text-align: center;
		line-height: 144rpx;
		/deep/.uni-textarea-placeholder {
			font-size: 28rpx;
			color: #7b7b7b;
			text-align: center;
			margin-top: 50rpx;
		}
}
.placeholder {
	position: absolute;
	top: 218rpx;
	left: 95rpx;
	font-size: 28rpx;
	color: #7b7b7b;
}
.left{
	text-align: left!important;
	line-height: 1!important;
}
.ok_btn{
		position: absolute;
		width:40%;
		right: 8%;
		bottom: 2%;
		height: 20%;
}
.cancel_btn{
	position: absolute;
	width:40%;
	left: 5%;
	bottom: 2%;
	height: 20%;
}
.back_btn {
	position: absolute;
	width: 69rpx;
	height: 87rpx;
	left: 0%;
	top: 105rpx;
	z-index: 6666;
}
.tab_btn{
	position: absolute;
	width: 185rpx;
	height: 60rpx;
	left: 0%;
	top: 200rpx;
}

.page{
	.square{
		width: 100%;
		height: 1070rpx;
		padding: 0 17rpx;
		position: absolute;
		top: 346rpx;
		.scroll-view_H {
			width: 100%;
			height: 100%;
			// overflow: scroll;
		}
		.scroll-box {
			display: flex;
			flex-wrap: nowrap;
		}
		.dj-ts0 {
			width: 192rpx;
			height: 99rpx;
		}
		.dj-ts {
			width: 192rpx;
			height: 99rpx;
			position: absolute;
			height: 99rpx;
			right: 0;
			top: 150rpx;
		}
		.end-box {
			position: absolute;
			bottom: 10rpx;
			right: 60rpx;
			text-align: center;
			font-size: 0;
		}
		.dj-dz {
			width: 62rpx;
			height: 44rpx;
			margin-bottom: 5rpx;
		}
		.end-num{
			font-size: 15rpx;
		}
		.item-end {
			display: flex!important;
			align-items: flex-start!important;
			position: relative;
		}
		.no-data {
			line-height: 319rpx;
		}
		.scroll-view-item_H {
			display: inline-block;
			width: 541rpx;
			height: 389rpx;
			text-align: left;
			background: #fff;
			border: 1px solid #181818;
			border-radius: 40rpx;
			margin: 0 25rpx 25rpx 0;
			padding: 30rpx;
			.item-name {
				font-size: 48rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.item-name2 {
				font-size: 48rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.item-num{
				font-size: 36rpx;
				color: #369eff;
			}
			.sendImage {
				width: 305rpx;
				height: 168rpx!important;
				border-radius: 16rpx;
			}
			.item-border{
				width: 100%;
				height: 1px;
				background-color: #ccc;
				margin: 10rpx 0;
			}
			.item-msg {
				font-size: 30rpx;
				color: #369eff;
				white-space: pre-wrap;
				line-height: 1
			}
			.item-dy {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;
				margin: 20rpx 0;
				.dy-title {
					font-size: 24rpx;
					white-space: nowrap;
				}
				.dyImage {
					width: 101rpx;
					height: 48rpx
				}
				.dyImage-txt {
					position: absolute;
					left: 15rpx;
					top: 9rpx;
					font-weight: bold;
				}
			}
			.item-dw {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				.dw-bq {
					font-size: 17rpx;
					white-space: nowrap;
					background-color: #369eff;
					border: 1px solid #181818;
					border-radius: 6rpx;
					position: absolute;
					left: 0;
					top: -10rpx;
					z-index: 5;
				}
				.dw-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					margin-right: 10rpx;
					width: 88rpx;
				}
				.dwImage {
					width: 65rpx;
					height: 65rpx;
					border-radius: 50%;
				}
				.dw-name {
					width: 88rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 15rpx;
					white-space: nowrap;
					text-align: center;
				}
			}
		}
	}
}
</style>
